---
title: BranchPickerPrimitive
---

View and switch between branches.

import { ParametersTable } from "@/components/docs";

## Anatomy

```tsx
import { BranchPickerPrimitive } from "@assistant-ui/react";

const BranchPicker = () => (
  <BranchPickerPrimitive.Root>
    <BranchPickerPrimitive.Previous />
    <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
    <BranchPickerPrimitive.Next />
  </BranchPickerPrimitive.Root>
);
```

## API Reference

### Root

Containts all parts of the branch picker.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="BranchPickerPrimitiveRootProps"
  parameters={[
    {
      name: "asChild",
    },
    {
      name: "hideWhenSingleBranch",
      type: "boolean",
      default: "false",
      description:
        "Do not render the BranchPicker when there is only one branch at the current message.",
    },
  ]}
/>

### Number

The current branch number.

This primitive renders the raw number as a string.

### Count

The total number of branches.

This primitive renders the raw number as a string.

### Previous

Navigates to the previous branch.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="BranchPickerPrimitivePreviousProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>

### Next

Navigates to the next branch.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="BranchPickerPrimitiveNextProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>
